<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>CSS 伪类与伪元素</h1>
    <h2>参考链接</h2>
    <p><a target="_blank" href="https://www.runoob.com/css/css-pseudo-classes.html">CSS 伪类(Pseudo-classes)</a></p>
    <p><a target="_blank" href="https://www.runoob.com/css/css-pseudo-elements.html">CSS 伪元素</a></p>
    <p>详细内容可以参见链接内容</p>

    <h2>伪类的语法</h2>
    <p>selector:pseudo-class {property:value;}</p>
    <h2>伪元素的语法</h2>
    <p>selector:pseudo-element {property:value;}</p>
    



    <h2>伪类与伪元素列表</h2>

    <h3>第一部分</h3>
    <ul>
        <li><strong>:checked</strong> 示例：input:checked 选择所有选中的表单元素</li>

        <li><strong>:focus</strong> 示例： input:focus 选择元素输入后具有焦点</li>

        <li><strong>:enabled</strong> 示例：input:enabled 选择所有启用的表单元素</li>
        <li><strong>:disabled</strong> 示例：input:disabled 选择所有禁用的表单元素</li>

        <li><strong>:in-range</strong> 示例：input:in-range 选择元素指定范围内的值</li>
        <li><strong>:out-of-range</strong> 示例：input:out-of-range 选择指定范围以外的值的元素属性</li>

        <li><strong>:invalid</strong> 示例：input:invalid 选择所有无效的元素</li>
        <li><strong>:valid</strong> 示例： input:valid 选择所有有效值的属性</li>

        <li><strong>:optional</strong> 示例：input:optional 选择没有"required"的元素属性</li>
        <li><strong>:required</strong> 示例： input:required 选择有"required"属性指定的元素属性</li>

        <li><strong>:read-only</strong> 示例： input:read-only 选择只读属性的元素属性</li>
        <li><strong>:read-write</strong> 示例：input:read-write 选择没有只读属性的元素属性</li>

    </ul>

    <h3>第二部分</h3>
    <ul>
        <li><strong>:empty</strong>示例： p:empty 匹配没有任何子级的元素 </li>
        <li><strong>:only-of-type</strong>示例：p:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素</li>
        <li><strong>:only-child</strong>示例： p:only-child 匹配属于父元素中唯一子元素的元素 </li>

        <li><strong>:first-of-type</strong>示例： p:first-of-type 选择在父类所有p子元素中的第一个p元素 </li>
        <li><strong>:last-of-type</strong>示例： p:last-of-type 选择在父类所有p子元素中的最后一个p元素 </li>
        <li><strong>:first-child</strong>示例： p:first-child 选择在父类所有子元素中，作为第一个，且是p元素的元素 </li>
        <li><strong>:last-child</strong>示例： p:last-child 选择在父类所有子元素中，作为最后一个，且是p元素的元素 </li>
    
        <li><strong>:before</strong>示例： p:before 在每个p元素之前插入内容 </li>
        <li><strong>:after</strong>示例：p:after 在每个p元素之后插入内容 </li>
    </ul>

    <h3>第三部分</h3>

    <ul>
        <li><strong>:link</strong>示例： a:link 选择所有未访问链接 </li>
        <li><strong>:visited</strong>示例： a:visited 选择所有访问过的链接 </li>
        <li><strong>:active</strong>示例： a:active 选择正在活动链接 </li>
        <li><strong>:hover</strong>示例： a:hover 把鼠标放在链接上的状态 </li>
    </ul>


    <h3>第四部分</h3>

    <ul>
        <li><strong>:root</strong>示例： 选择当前文档的根元素 </li>
        <li><strong>:target</strong>示例：选择当前跳转标签的元素 </li>
    </ul>


    <h3>展示效果</h3>
    <iframe width="100%" src="./pseudoClasses/input.html" height="6500px" scrolling="no"></iframe>

</body>

</html>